<template>
  <view>
    <u-navbar :title="title" placeholder bgColor="transparent" :autoBack="true">
      <view  slot="center" class="text-center">
        <view v-if="orderDetails.paid == 0">待支付</view>
		<view v-if="orderDetails.status == 0 && orderDetails.paid == 1">待发货</view>
		<view v-if="orderDetails.status == 1 && orderDetails.paid == 1">已发货</view>
		<view v-if="orderDetails.status == 2 && orderDetails.paid == 1">已发货</view>
		<view v-if="orderDetails.status == 3 && orderDetails.paid == 1">已完成</view>
        <view class="text-24 font-medium c_666666" v-if="orderDetails.paid == 0">还剩15分钟订单自动取消</view>
      </view>
    </u-navbar>
    <view class="address">
      <view class="flex align-item_center" @click="route_address">
        <image
          style="margin-right: 30rpx"
          class="wh48"
          src="https://test.uaima.cn/public/static/product/map.png"
        ></image>
        <view v-if="notAddress" class="dotAddress">添加地址</view>
        <view v-else class="addressInfo">
          <view>{{ orderDetails.realName }} {{ orderDetails.userPhone }} </view>
          <view class="omit1">{{ orderDetails.userAddress }}</view>
        </view>
      </view>
      <!-- <view>
				<u-icon name="arrow-right" size="21rpx" color="#333333"></u-icon>
			</view> -->
    </view>
    <view class="page-classify-right-content-item">
      <image
        style="
          width: 190rpx;
          height: 190rpx;
          border-radius: 16rpx;
          margin-right: 20rpx;
          flex-shrink: 0;
        "
        src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
        mode="aspectFill"
      ></image>
      <view class="page-classify-right-content-item-info">
        <view class="page-classify-right-content-item-info-title">
          {{ orderDetails.mark }}
        </view>
        <view class="page-classify-right-content-item-info-doc">
          约3斤，毛重6斤
        </view>
        <view class="page-classify-right-content-item-info-price">
          <view>
            <text style="font-size: 24rpx">￥</text>
            {{ orderDetails.payPostage }}
          </view>
          <view class="text-24" style="color: #666666"
            >x{{ orderDetails.totalNum }}</view
          >
        </view>
      </view>
    </view>
    <view class="desc">
      <view class="flex justify-content_space-between">
        <view class="text-30 font-medium c_181818">商品金额</view>
        <view class="text-30 font-medium c_181818"
          >￥{{ orderDetails.payPostage }}</view
        >
      </view>
      <view class="flex mt-30" style="justify-content: flex-end">
        <view class="text-30 font-medium c_181818">
          <text class="text-25 font-medium" style="color: #9f9f9f"
            >共2件商品
          </text>
          <text class="text-28 font-medium ml-20" style="color: #ed7b42"
            >待支付</text
          >
          <text class="text-28 font-medium ml-14" style="color: #ed7b42"
            >￥</text
          >
          <text class="text-44 font-medium" style="color: #ed7b42">{{
            orderDetails.payPrice
          }}</text>
        </view>
      </view>
    </view>
    <view class="desc">
      <view class="flex justify-content_space-between">
        <view class="text-26 font-medium" style="color: #818181">订单编号</view>
        <view
          class="text-26 font-medium c_181818"
          @click="copyText(orderDetails.orderId)"
          >{{ orderDetails.orderId }} | 复制</view
        >
      </view>
      <view class="flex justify-content_space-between mt-30">
        <view class="text-26 font-medium" style="color: #818181">支付方式</view>
        <view class="text-26 font-medium c_181818"
          >{{ orderDetails.payType === "weixin" ? "微信支付" : "支付宝支付" }}
        </view>
      </view>
      <view class="flex justify-content_space-between mt-30">
        <view class="text-26 font-medium" style="color: #818181">订单时间</view>
        <view class="text-26 font-medium c_181818"
          >{{ orderDetails.createTime }}
        </view>
      </view>
      <view class="flex justify-content_space-between mt-30">
        <view class="text-26 font-medium" style="color: #818181">支付时间</view>
        <view class="text-26 font-medium c_181818"
          >{{ orderDetails.payTime }}
        </view>
      </view>
    </view>
    <view class="foot" v-if="orderDetails.status !== 0 || orderDetails.paid == 0">
      <view class="left" @click="deleteOrder(orderDetails.unique)" v-if="orderDetails.status === 3">
        删除订单
      </view>
      <view class="left" @click="cancelOrder" v-else> 取消订单 </view>
      <view class="payBtn ml-26" @click="confirmOrder">{{ orderDetails.status === 3 ? '再次购买' : '立即购买' }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderDetails: null,
    };
  },
  onLoad(options) {
    const key = options.key;
    console.log(key);
    this.orderDetail(key);
  },
  methods: {
	deleteOrder(unique) {
      this.$iApi
        .deleteOrder({
          uni: unique,
        })
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            uni.showToast({
              title: "删除成功!",
              icon: "success",
              duration: 2000,
            });
          }
        });
    },
    cancelOrder() {
      this.$iApi
        .cancelOrder({
          id: this.orderDetails.orderId,
        })
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            uni.showToast({
              title: "操作成功!",
              icon: "success",
              duration: 2000,
            });
          }
        });
    },
    copyText(orderId) {
      uni.setClipboardData({
        data: orderId, // 要复制的文本
        success: () => {
          uni.showToast({
            title: "复制成功",
            icon: "success",
          });
        },
        fail: () => {
          uni.showToast({
            title: "复制失败",
            icon: "none",
          });
        },
      });
    },
    orderDetail(key) {
      this.$iApi.orderDetail(key).then((res) => {
        console.log(res);
        this.orderDetails = res.data;
      });
    },
    route_address() {
      uni.navigateTo({
        url: "/pages/user/address",
      });
    },
  },
  computed: {
    // 计算 title 的 computed 属性
    title() {
      const { status } = this.orderDetails;

      if (typeof status === "number") {
        switch (status) {
          case 0:
            return "待发货";
          case 1:
            return "已发货";
          case 3:
            return "已完成";
          default:
            return "状态未知";
        }
      } else {
        return "状态无效";
      }
    },
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.foot {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17rpx 30rpx;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom); //兼容IOS<11.2
  padding-bottom: env(safe-area-inset-bottom); //兼容 I0S>11.2

  .left {
    width: 220rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    border: 2rpx solid #cccccc;
    font-weight: 500;
    font-size: 30rpx;
    color: #181818;
  }

  .payBtn {
    text-align: center;
    width: 400rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #67b609;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #ffffff;
  }
}

.desc {
  width: 690rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin: 20rpx auto 0;
  padding: 40rpx 20rpx;
  box-sizing: border-box;
}

.page-classify-right-content-item {
  width: 690rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  align-content: center;
  margin: 21rpx auto 0;

  &-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;

    &-title {
      width: 100%;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }

    &-doc {
      width: max-content;
      background: rgba(237, 123, 66, 0.06);
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      border: 1rpx solid rgba(237, 123, 66, 0.3);
      padding: 6rpx 10rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #ed7b42;
      line-height: 30rpx;
    }

    &-price {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 500;
      font-size: 32rpx;
      color: #ed7b42;
    }
  }
}

.wh48 {
  $wh: 48rpx;
  width: $wh;
  height: $wh;
}

.address {
  width: 690rpx;
  height: 158rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  margin: 30rpx auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .addressInfo {
    width: 520rpx;

    view:first-child {
      font-weight: 500;
      font-size: 30rpx;
      color: #181818;
    }

    view:last-child {
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      margin-top: 8rpx;
    }
  }

  .dotAddress {
    font-weight: 400;
    font-size: 32rpx;
    color: #28ba54;
  }
}
</style>
